<template>
	<view class="deep">
		<!-- 搜索 -->
		<view class=" bg-white d-flex j-center a-center">
			<view class="bg-light-secondary span-18 rounded-50 d-flex py-1 ">
				<u-icon   name="search" color="#888888" size="33" class="mx-2"></u-icon>
				<input class="" type="text" placeholder="搜索订单" disabled @click="sendSeach" focus disabled="true"  />
			</view>
		</view>
		<!-- 头部 -->
		<view class="bg-white sale_header" >
			<u-tabs-swiper ref="uTabs" active-color="#ff0000" bar-width="80" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
						 swiperWidth="750"></u-tabs-swiper>
		</view>
			<!-- 内容 -->
			<swiper :style="{'height':scrollHeight}"  :current="swiperCurrent" duration="600"  @transition="transition" @animationfinish="animationfinish">
				<swiper-item>
					<scroll-view scroll-y="true" :style="{'height':scrollHeight}" @scrolltolower="scrolltolower" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore">
						<view class="wrap deep h_100" >
							<view class="mt-5 h_100" v-if="u_loadmore">
								<u-loadmore status="loading" icon-type="circle" />
								<view v-if="refund_list.length<=0" class="d-flex flex-column w-100 a-center j-center h_100">
									<image src="../../static/images/order/icon_no_data.png" mode="" class="icon_no_data"></image>
									<view class="">暂无任何订单</view>
								</view>	
							</view>
							<view class="" v-else>
								<view class="m-2 bg-white rounded-20" @click="send_detail(item)" v-for="(item,index) in refund_list" :key="index">
									<view class="today_title px-3 py-2 rounded-top">
										<view class="d-flex j-sb pt">
											<view class="d-flex a-center">
												<view class="mr-1 rounded-50 d-flex user_img j-center a-center">
													<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
												</view>
												<view class="">{{item.mobile}}</view>
											</view>
											<view class="">{{item.label_return_status}}</view>
										</view>
										<view class="d-flex j-sb text-light-muted">
											<view class="">{{item.apply_time}}</view>
											<view class="">{{item.order_sn}}</view>
										</view>
									</view>
									<view class="p-3">
										<view class="d-flex a-center" v-if="item.goods_items.length>1">
											<view  class="mr-1">
												<image class="today_hot rounded-20" :src="item.goods_items.img.url?item.goods_items.img.url:defaltImage" mode=""></image>
											</view>
											<view class="mr-2" v-if="item.goods_items.length>3">
												<u-icon name="more-dot-fill" color="#eaeaea" size="50"></u-icon>
											</view>
										</view>
										<view class="d-flex" v-else>
											<view class="">
												<image class="today_hot rounded-20" :src="item.goods_items.img.url" mode=""></image>
											</view>
											<view class="m-2">
												<view class="ellipsis">{{item.goods_items.goods_name}}</view>
											</view>
										</view>
										<view class="py-1">
											<text>共{{item.goods_items.return_number}}件</text><text>合计:{{item.goods_items.formatted_shop_price}}</text>
										</view>
										<view class="d-flex j-end">
											<view v-if="item.label_return_status=='待审核'" class="py-1 px-3 border rounded-50" @click.stop="agree(item)">同意</view>
											<view v-if="item.label_return_status=='已审核'" class="py-1 px-3 border ml-2 rounded-50" @click.stop="order_back(item)">收到退回商品</view>
											<view v-if="item.label_return_status=='已寄出商品'" class="py-1 px-3 border ml-2 rounded-50" @click.stop="service(item)">完成维修</view>
											<view class="py-1 px-3 border ml-2 rounded-50" @click.stop="remark(item)">备注</view>
										</view>
									</view>
								</view>
								<view class="pb-2" v-if="!refund_list.length<=0">
									<view class="" v-if="refund_list.length==total"  @click="loadmores">
										<u-loadmore status="nomore" icon-type="circle" />
									</view>
									<view class="" v-else >
										<u-loadmore status="loading" icon-type="circle" />
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" :style="{'height':scrollHeight}">
						<view class="wrap deep h_100" >
							<view v-if="repair_list.length<=0" class="d-flex flex-column w-100 a-center j-center h_100">
								<image src="../../../static/images/home/icon_no_data.png" mode="" class="icon_no_data"></image>
								<view class="">暂无任何订单</view>
							</view>	
							<view class="" v-else>
								<view class="m-2 bg-white rounded-20" @click="send_detail(item)" v-for="(item,index) in repair_list" :key="index">
									<view class="today_title px-3 py-2 rounded-top">
										<view class="d-flex j-sb pt">
											<view class="d-flex a-center">
												<view class="mr-1 rounded-50 d-flex user_img j-center a-center">
													<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
												</view>
												<view class="">{{item.mobile}}</view>
											</view>
											<view class="">{{item.label_return_status}}</view>
										</view>
										<view class="d-flex j-sb text-light-muted">
											<view class="">{{item.apply_time}}</view>
											<view class="">{{item.order_sn}}</view>
										</view>
									</view>
									<view class="p-3">
										<view class="d-flex a-center" v-if="item.goods_items.length>1">
											<view  class="mr-1">
												<image class="today_hot rounded-20" :src="item.goods_items.img.url?item.goods_items.img.url:defaltImage" mode=""></image>
											</view>
											<view class="mr-2" v-if="item.goods_items.length>3">
												<u-icon name="more-dot-fill" color="#eaeaea" size="50"></u-icon>
											</view>
										</view>
										<view class="d-flex" v-else>
											<view class="">
												<image class="today_hot rounded-20" :src="item.goods_items.img.url" mode=""></image>
											</view>
											<view class="m-2">
												<view class="ellipsis">{{item.goods_items.goods_name}}</view>
											</view>
										</view>
										<view class="py-1">
											<text>共{{item.goods_items.return_number}}件</text><text>合计:{{item.goods_items.formatted_shop_price}}</text>
										</view>
										<view class="d-flex j-end">
											<view v-if="item.label_return_status=='待审核'" class="py-1 px-3 border rounded-50" @click.stop="agree(item)">同意</view>
											<view v-if="item.label_return_status=='已审核'" class="py-1 px-3 border ml-2 rounded-50" @click.stop="order_back(item)">收到退回商品</view>
											<view v-if="item.label_return_status=='收到寄回商品'" class="py-1 px-3 border ml-2 rounded-50" @click.stop="rebate(item)">寄出商品</view>
											<view v-if="item.label_return_status=='已寄出商品'" class="py-1 px-3 border ml-2 rounded-50" @click.stop="service(item)">完成维修</view>
											<view class="py-1 px-3 border ml-2 rounded-50" @click.stop="remark(item)">备注</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
	</view>
</template>

<script>
	import sPopup from '../../components/s-popup/index.vue';
	const SIZE = 10
	export default {
		components:{
			sPopup // 弹框
		},
		data() {
			return {
				list:[
					{todat_id:1,name:"退货"},
					{todat_id:2,name:"维修"},
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				scrollHeight:0,
				
				firstFocus:false,
				refund_list:[], // 退货
				repair_list:[], // 维修

				items:"",	// 当前数据列表
				
				goods_id:"",

				more:1, // 第几页
				count:10, // 条数
				total:0, // 总页数
				u_loadmore:true, // 加载中
				
				triggered: false, // 下拉刷新
			}
		},
		computed:{
			// 更新列表
			updataList(){
				if(this.swiperCurrent==0){
					this.$H.post("admin/order/return/list",{
						type:"return",
						pagination:{
							count:this.count,
							page:this.more
						},
						}).then(res=>{
						this.refund_list=res.data
					})
				}else if(this.swiperCurrent==1){
					this.$H.post("admin/order/return/list",{
						type:"service",
						}).then(res=>{
						this.repair_list=res.data
					})
				}
			},
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.sale_header').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		onLoad(e) {
			this.$H.post("admin/order/return/list",{
				type:"return",
				pagination:{
					count:this.count,
					more:this.more
				},
				}).then(res=>{
					this.u_loadmore=false 
					this.refund_list=res.data
					this.total=res.paginated.total
			})
			
			// 下拉刷新
			this._freshing = false;
		},
		onShow() {
			this.$H.post("admin/order/return/list",{
				type:"return",
				pagination:{
					count:this.count,
					more:this.more
				}
			}).then(res=>{
				this.refund_list=res.data
			})
			this.$H.post("admin/order/return/list",{
				type:"service",
				}).then(res=>{
				this.repair_list=res.data
			})
		},
		methods: {
			// 订单搜索页
			sendSeach(){
				uni.navigateTo({
					url:"/pagesA/order/order-today-seach?order_status_code="+'退货'
				})
			},
			// 商品详情
			send_detail(item){
				console.log(item.return_id)
				uni.navigateTo({
					url:'/pagesA/order/order-return-detail?return_id='+item.return_id
				})
			},
			// 备注
			remark(item){
				uni.navigateTo({
					url:`/pagesA/order/order-record?order_id=${item.order_id}&return_id=${item.return_id}`
				})
			},
			// 同意
			agree(item){
				this.$H.post("admin/order/return/operate/agree",{
					return_id:item.return_id
				}).then(res=>{
					if(res.data){
						this.$u.toast("申请通过")
						if(this.swiperCurrent==0){
							this.$H.post("admin/order/return/list",{
								type:"return",
								pagination:{
									count:this.count,
									page:this.more
								},
								}).then(res=>{
								this.refund_list=res.data
							})
						}else if(this.swiperCurrent==1){
							this.$H.post("admin/order/return/list",{
								type:"service",
								}).then(res=>{
								this.repair_list=res.data
							})
						}
					}else{
						this.$u.toast(res.status.error_desc)
					}
				})
			},
			// 收到退回商品
			order_back(item){
				this.$H.post("admin/order/return/operate/receive",{
					return_id:item.return_id
				}).then(res=>{
					if(res.data){
						this.$u.toast("已确定收到退货商品")
						if(this.swiperCurrent==0){
							this.$H.post("admin/order/return/list",{
								type:"return",
								pagination:{
									count:this.count,
									page:this.more
								},
								}).then(res=>{
								this.refund_list=res.data
							})
						}else if(this.swiperCurrent==1){
							this.$H.post("admin/order/return/list",{
								type:"service",
								}).then(res=>{
								this.repair_list=res.data
							})
						}
					}else{
						this.$u.toast(res.status.error_desc)
					}
				})
			},
			// 寄出商品
			rebate(item){
				uni.navigateTo({
					url:`/pagesA/order/order-send-off?order_id=${item.order_id}&return_id=${item.return_id}`
				})
			},
			// 完成维修
			service(item){
				uni.navigateTo({
					url:`/pagesA/order/order-service?order_id=${item.order_id}&return_id=${item.return_id}`
				})
			},
			
			
			// 下拉刷新 自定义下拉刷新控件被下拉
			onPulling(e) {
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
			    if (this._freshing) return;
			    this._freshing = true;
			    setTimeout(() => {
			       this.getData()
				   this.triggered = false;
				   this._freshing = false;
			    }, 1000)
			},
			// 自定义下拉刷新被复位
			onRestore() {
			    this.triggered = 'restore'; // 需要重置
			    console.log("onRestore");
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 上拉加载数据
			getData(){
				this.$H.post("admin/order/return/list",{
					type:"return",
					pagination:{
						count:this.count,
						page:this.more
					}
				}).then(res=>{
					this.refund_list=res.data
				})
			},
			// 上拉加载函数
			scrolltolower(){
			    let that = this
			    // 每次上拉加载的数据比上一次多十个
			    that.count += SIZE
				if(that.refund_list.length==that.total){
					return
				}else{
					setTimeout(()=>{
					    that.getData()
					},1000)
				}
			}
		}
	}
</script>

<style>
	.active_today{
		color: #ff0000;
		border-bottom: 5rpx solid #ff0000;
	}
	.user_img{
		width: 50upx;
		height: 50upx;
		background-color: #ffd1d0;
	}
	.today_title{
		background-color: #f6efef;
	}
	.today_hot{
		width: 150upx;
		height: 150upx;
	}
	
	.goods_img{
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
	}
	.goods_card_head_left{
		width: 200upx;
		height:200upx;
	}
	.goods_card_head_left image{
		width: 200upx;
		height:200upx;
		border-radius: 20upx;
	}
	.goods_card_head_right image{
		width: 30upx;
		height: 30upx;
	}
	.goods_card_content_footer view{
		border: 1px solid #808080;
		box-sizing: border-box;
		width: 120upx;
		height: 59upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10upx;
		border-radius: 30upx;
	}
	.popupImg{
		width: 170upx;
		height: 170upx;
		border-radius: 20upx;
	}
	.deep /deep/ button{
		width: 70%;
		border-radius: 50upx;
		font-size: 30upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	
	.goods_icon{
		width: 30upx;
		height: 30upx;
	}
	
	.s-popup-mask{
		background: rgba(0,0,0,0.2)!important;
	}
	.content{
		background-color:rgba(255,255,255,0.96)!important;
		color: #666666;
	}
	.s-popup-wrap{
		background: rgba(204,204,204,0)!important;
	}
	.icon_share view{
		color: #888;
	}
	.icon_share image{
		width: 120upx;
		height: 120upx;
	}
	.nowrap{
		white-space:nowrap;
	}
	.after_h{
		height: 60upx;
	}
</style>
